/*
 * @message: 描述
 * @Author: Roy
 * @Email: cx_love_xc@163.com
 * @Github: cx_love_xc@163.com
 * @Date: 2022-01-15 15:21:39
 * @LastEditors: Roy
 * @LastEditTime: 2022-01-15 18:09:01
 * @Deprecated: 否
 * @FilePath: /blog/src/admin/container/home/component/areaItem/components/Banner.jsx
 */

import React, { useCallback } from 'react';
import { Input, Switch } from 'antd'
import styles from './style.module.scss'

const { TextArea } = Input;

const Banner = (props) => {
    const {
        attributes = {}, changeAttributes,
    } = props;
    const { title, desc, showSmallPic,
        smallPicUrl, backgroundUrl, backgroundHeight } = attributes;
    const showSmallPicClick = useCallback((checked) => {
        if (!checked) {
            changeAttributes({
                'showSmallPic': checked,
                'smallPicUrl': ''
            })
        } else {
            changeAttributes({
                'showSmallPic': checked,
            })
        }
    }, [])

    return (
        <div className={styles.wrapper}>
            <div className={styles.row}>
                <span className={styles.label}>页面标题</span>
                <Input
                    value={title}
                    className={styles.content}
                    placeholder="请输入页面标题"
                    onChange={(e) => changeAttributes({ 'title': e.target.value })}
                />
            </div>
            <div className={styles.row}>
                <span className={styles.label}>页面描述</span>
                <TextArea
                    value={desc}
                    className={styles.content}
                    rows={2}
                    placeholder="请输入页面描述"
                    onChange={(e) => changeAttributes({ 'desc': e.target.value })}
                />
            </div>
            <div className={styles.row}>
                <span className={styles.label}>展示小图</span>
                <Switch checked={showSmallPic} onChange={(checked) => showSmallPicClick(checked)} />
            </div>
            {
                showSmallPic ? (<div className={styles.row}>
                    <span className={styles.label}>小图链接</span>
                    <Input
                        value={smallPicUrl}
                        className={styles.content}
                        placeholder="请输入小图片url"
                        onChange={(e) => changeAttributes({ 'smallPicUrl': e.target.value })}
                    />
                </div>) : null
            }
            <div className={styles.row}>
                <span className={styles.label}>背景图链接</span>
                <Input
                    value={backgroundUrl}
                    className={styles.content}
                    placeholder="请输入背景图片url"
                    onChange={(e) => changeAttributes({ 'backgroundUrl': e.target.value })}
                />
            </div>
            <div className={styles.row}>
                <span className={styles.label}>背景高度</span>
                <Input
                    type="number"
                    value={backgroundHeight}
                    className={styles.content}
                    placeholder="请输入背景图片高度"
                    onChange={(e) => changeAttributes({ 'backgroundHeight': e.target.value })}
                />
            </div>
        </div>
    )
}

export default Banner;